<template>
  <div class="function-area">
    <div class="function-title-area">
      <div class="function-area-title-piece"></div>
      <div class="function-area-title">报名信息收集</div>
    </div>
    <el-divider></el-divider>
    <div class="infos">
      <div class="row-value">
        <el-input style="width: 90%; padding-left: 10px;" @focus="goSetConfig(enroll_info_collect.collect_rule[0],0)"
                  :placeholder="enroll_info_collect.collect_rule[0].label">
          <span class="suffix-show" slot="suffix">{{ enroll_info_collect.collect_rule[0].require? '必填':'选填' }}</span>
        </el-input>
      </div>
      <div class="row-value">
        <el-input style="width: 90%; padding-left: 10px;" :disabled="true"
                  :placeholder="enroll_info_collect.collect_rule[1].label">
          <span class="suffix-show" slot="suffix">{{ enroll_info_collect.collect_rule[1].require? '必填':'选填' }}</span>
        </el-input>
      </div>
      <template v-for="(item, index) in enroll_info_collect.collect_rule">
        <div v-if="index > 1" class="row-value">
          <el-input style="width: 90%; padding-left: 10px;" v-model="item.label" @focus="goSetConfig(item,index)"
                    :placeholder="formatShowContent(item.type)">
            <span class="suffix-show" slot="suffix">{{ item.require ? '必填':'选填' }}/{{ formatType(item.type) }}</span>
          </el-input>
          <el-button type="text" class="button-style"
                     @click="removeItem(index)">
            <i class="el-icon-error"></i>
          </el-button>
        </div>
      </template>
    </div>
    <div v-if="enroll_info_collect.collect_rule.length < 10" class="buttons">
      <el-button class="button" icon="el-icon-plus" @click="addItem('input')">文本项</el-button>
      <el-button class="button" icon="el-icon-plus" @click="addItem('radio')">单选项</el-button>
      <el-button class="button" icon="el-icon-plus" @click="addItem('select')">多选项</el-button>
    </div>

    <el-dialog :title="setConfigTitle" :visible.sync="setConfigOpen" width="500px" append-to-body>
      <div class="set-area">
        <div v-if="createIndex === 0">
          <div class="name-option">
            <p class="desc">输入框填写你想获取谁的姓名，如“家长”“孩子”。不填写默认显示姓名</p>
            <el-input style="width: 100%;" v-model="createItemTypeByInput.label"></el-input>
<!--            <span class="suffix-desc">姓名</span>-->
          </div>
        </div>
        <div v-else-if="createType === 'input' && createIndex !== 0">
          <div class="first-row">
            <span class="is-require-title">必填</span>
            <span class="is-require-switch"><el-switch v-model="createItemTypeByInput.require"></el-switch></span>
            <el-input class="label-input" v-model="createItemTypeByInput.label" placeholder="输入想要收集的信息"></el-input>
          </div>
          <div>
            <p>文本项模式</p>
            <el-radio-group v-model="createItemTypeByInput.show_type">
              <el-radio-button label="text" value="text">普通输入</el-radio-button>
              <el-radio-button label="number-roll" value="number-roll">数字滚动</el-radio-button>
              <el-radio-button label="dateSelect" value="date-select">日期选择</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div v-else-if="createType === 'radio' && createIndex !== 0">
          <div>
            <div class="first-row">
              <span class="is-require-title">必填</span>
              <span class="is-require-switch"><el-switch v-model="createItemTypeByRadio.require"></el-switch></span>
            </div>
            <el-input class="label-input" v-model="createItemTypeByRadio.label" placeholder="输入单选项问题" maxlength="15" show-word-limit></el-input>
              <div class="options">
                <template v-for="(item, child_index) in createItemTypeByRadio.options">
                  <el-input class="input-style" v-model="createItemTypeByRadio.options[child_index]" :placeholder="optionsNumber(child_index)">
                    <el-button slot="append" @click="removeItemChild(child_index)">
                      <i class="el-icon-error"></i>
                    </el-button>
                  </el-input>
                </template>
              </div>
            <div class="radio-button">
              <el-button class="radio-button-style" icon="el-icon-plus" @click="addItemChild">添加选项</el-button>
            </div>
          </div>
        </div>
        <div v-else-if="createType === 'select' && createIndex !== 0">
          <div>
            <div class="first-row">
              <span class="is-require-title">必填</span>
              <span class="is-require-switch"><el-switch v-model="createItemTypeBySelect.require"></el-switch></span>
              <span class="multiple-min">
              <span>最少选择</span>
              <el-input class="multiple-input" v-model="createItemTypeBySelect.multiple_min" type="number"></el-input>
              <span>项,</span>
            </span>
              <span class="multiple-max">
              <span>最多选择</span>
              <el-input class="multiple-input" v-model="createItemTypeBySelect.multiple_max" type="number"></el-input>
              <span>项</span>
            </span>
            </div>
            <el-input class="label-input" v-model="createItemTypeBySelect.label" placeholder="输入多选项问题" maxlength="15" show-word-limit></el-input>
            <div class="options">
              <template v-for="(item, child_index) in createItemTypeBySelect.options">
                <el-input class="input-style" v-model="createItemTypeBySelect.options[child_index]" :placeholder="optionsNumber(child_index)">
                  <el-button slot="append" @click="removeItemChild(child_index)">
                    <i class="el-icon-error"></i>
                  </el-button>
                </el-input>
              </template>
            </div>
            <div class="radio-button">
              <el-button class="radio-button-style" icon="el-icon-plus" @click="addItemChild">添加选项</el-button>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="setConfigOpen = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "EnrollInfoCollect",
  props: ['enroll_info_collect'],
  data() {
    return {
      setConfigOpen: false,
      setConfigTitle: '',
      createIndex: undefined,
      createType: '',
      createItemTypeByInput: {},
      createItemTypeByRadio: {},
      createItemTypeBySelect: {},
    }
  },
  methods: {
    /** 格式提示内容 */
    formatShowContent(val) {
      let text = '';
      if (val === 'input') {
        text = '输入想要收集的信息'
      }
      if (val === 'radio') {
        text = '输入单选项问题'
      }
      if (val === 'select') {
        text = '输入多选项问题'
      }
      return text;
    },
    /** 格式化类型 */
    formatType(type) {
      let text = '';
      if (type === 'input') {
        text = '文本'
      }
      if (type === 'radio') {
        text = '单选'
      }
      if (type === 'select') {
        text = '多选'
      }
      return text;
    },
    optionsNumber(index) {
      return '请输入选项' + (index + 1)
    },
    /** 移除选项框 */
    removeItem(index) {
      this.$emit('remove-collect-item',index);
    },
    /** 设置配置 */
    goSetConfig(item,index) {
      console.log('进入设置')
      console.log('item',item)
      console.log('index',index)
      this.createType = item.type;
      if (index === 0) {
        this.setConfigTitle = '姓名项设置';
        console.log('this.createItemTypeByInput',this.createItemTypeByInput)
        this.createItemTypeByInput = item;
      }
      this.createIndex = index;
      if (item.type === 'input') {
        this.setConfigTitle = '文本项设置';
        this.createItemTypeByInput = item;
      }
      if (item.type === 'radio') {
        this.setConfigTitle = '单选项设置';
        this.createItemTypeByRadio = item;
      }
      if (item.type === 'select') {
        this.setConfigTitle = '多选项设置';
        this.createItemTypeBySelect = item;
      }
      this.setConfigOpen = true;
    },
    /** 提交 */
    submit () {
      if (this.createType === 'input') {
        if (this.createIndex === 0) {
          if (!this.createItemTypeByInput.label || this.createItemTypeByInput.label === '') {
            this.createItemTypeByInput.label = '姓名';
          }
        }
        this.$emit('input-edit-item',this.createItemTypeByInput,this.createIndex);
      }
      if (this.createType === 'radio') {
        this.$emit('radio-edit-item',this.createItemTypeByRadio,this.createIndex);
      }
      if (this.createType === 'select') {
        this.$emit('select-edit-item',this.createItemTypeBySelect,this.createIndex);
      }
      this.setConfigOpen = false;
    },
    /** 添加文本框 */
    addItem(type) {
      this.$emit('add-item',type);
    },
    /** 添加小选项 */
    addItemChild() {
      this.$emit('add-item-child',this.createIndex);
    },
    /** 移除小选项 */
    removeItemChild(child_index) {
      this.$emit('remove-item-child',this.createIndex,child_index);
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-divider--horizontal {
  margin: 5px;
}

::v-deep .el-input__inner {
  height: 30px;
  line-height: 30px;
}

::v-deep .el-dialog__body{
  padding: 10px;
}

.function-area {
  margin-top: 10px;
  padding-left: 10px;

  .function-title-area {
    display: flex;
    position: relative;

    .function-area-title-piece {
      width: 5px;
      height: 30px;
      background-color: #2254f5;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    .function-area-title {
      width: 100%;
      height: 40px;
      font-size: 18px;
      font-weight: bold;
      color: #2254f5;
      padding-left: 10px;
      align-content: center;
    }
  }
  .infos {
    margin-bottom: 20px;
    .row-value {
      padding-bottom: 10px;
      .button-style {
        padding: 0;
        color: #74777b;
      }
      .suffix-show {
        line-height: 30px;
      }
    }
  }
  .buttons {
    margin-bottom: 20px;
    text-align: center;
    .button {
      margin: 0 20px;
    }
  }
}

.set-area {
  padding: 20px;
  .name-option {
    .desc {
      font-size: 14px;
    }
    .suffix-desc {
      padding-left: 10px;
    }
  }
}

.first-row {
  font-size: 14px;
  margin-bottom: 20px;
  .is-require-title {
    text-align: center;
    margin-right: 10px;
  }
  .is-require-switch {
    text-align: center;
  }
  .multiple-min {
    margin-left: 10px;
  }
  .multiple-input {
    width: 20%;
    padding-left: 5px;
    padding-right: 5px;
  }
  .multiple-max {
    margin-left: 10px;
  }
  .label-input {
    margin-top: 20px;
  }
}

.radio-button {
  margin: 20px 0;
  .radio-button-style {
    width: 100%;
    text-align: center;
  }
}
.options {
  margin-top: 20px;
  width: 440px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .input-style {
    width: 45%;
    margin-bottom: 10px;
  }
}

</style>
